<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子模型</title>
    <style>
        .conteiner{
            /* width: 500px;
            height: 500px; */
            width: 40%;
            height:500px;
            background-color: aqua;
            display: flex;
            flex-direction: row; /*设置元素摆放的方向(设置主轴方向)，默认水平方向，row、row-reverse、column、column-reverse*/
            justify-content: center; /*设置元素在主轴上的对齐方式，方向随主轴的变化而变化，其值也会跟着改变。*/
            align-items: center; /*设置元素在交叉轴上的对齐方式，方向随主轴的变化而变化，其值也会跟着改变。*/
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(115, 154, 41);
            flex-grow:2;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(17, 130, 152);
            flex-grow:1;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: rgb(181, 28, 173);
            flex-grow:2
        }
    </style>
</head>
<body>
    <div>
        <p>弹性盒子模型由弹性容器（Flex container）和弹性子元素（Flex item）组成。</p>
        <p>弹性容器通过设置 display属性的值为 flex，将其定义为弹性容器。</p>
        <p>弹性容器内包含了一个或多个弹性子元素。</p>
        <p>注：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只是定义了弹性子元素如果在弹性容器内布局。默认弹性盒子中的内容是横向摆放的。</p>
        <p><br>容器上的属性：</p>
        <p>flex-direction：设置主轴方向，默认为水平方向。值为row、rwo-reverse、column、column-reverse。</p>
        <p>justify-content：设置元素在主轴方向上的对齐方式，水平方向上的值为：ltr、rtl、center，纵向的值为：start、end、center。</p>
        <p>align-items：设置元素交叉轴方向上的对齐方式，水平方向上的值为：ltr、rtl、center，纵向的值为：start、end、center。</p>
        <p><br>子元素上的属性：</p>
        <p>flex-grow：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。默认为0，即如果存在剩余空间，也不放大。如果只有一个元素设置，那么按扩展因子转化百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%算。</p>
        <p>flex-grow 可以简写成 flex。是设置子元素所占的权重，根据权重划分盒子的空间。一旦设置了flex-grow 属性，设置的元素宽度就不再生效。</p>
    </div>
    <div class="conteiner">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>